<template>
  <div class="search">
    <nav class="searchList-nav" ref="change">
      <span
        :class="{ isActive: toggle == 'Songs' }"
        @click="handleChangeView('Songs')"
        >乐馆</span
      >
      <span
        :class="{ isActive: toggle == 'SongLists' }"
        @click="handleChangeView('SongLists')"
        >乐馆</span
      >
    </nav>
    <component :is="currentView"></component>
  </div>
</template>
<script>
import searchSongs from "../components/search/SearchSongs";
import searchSongLists from "../components/search/SearchSongLists";

export default {
  name: "search",
  components: {
    searchSongs,
    searchSongLists,
  },
  data() {
    return {
      toggle: "Songs",
      currentView: "searchSongs",
    };
  },
  methods: {
    //切换组件
    handleChangeView(component) {
      this.currentView = "search" + component;
      this.toggle = component;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/search.scss";
</style>
